<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="layout">
	<!-- data-layout-decorator="pages/test"> -->

	<head>
		<meta charset="UTF-8" />
		<title>RA-网络安全风险评估系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

		<link href="/css/jquery.mmenu.css" rel="stylesheet" />

		<link href="/css/style.css" rel="stylesheet" />
		<link href="/css/add-ons.min.css" rel="stylesheet" />

		<style type="text/css">
			html,
			body,
			.mm-page,
			.mm-page .content,
			#iframeDiv,
			.mm-page .content .row,
			#iframeDiv iframe {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			#iframeDiv {
				padding: 140px 37px 38px 278px;
				overflow: auto;
			}
			
			.nav>li:hover {
				background-color: #FFF;
			}
		</style>
		
		<script src="/vendor/js/jquery-2.1.1.min.js"></script>
	</head>

	<body>
		<div class="navbar" role="navigation">
			<div class="sidebar" style="height: auto;">
				<div class="sidebar-collapse">
					<div class="sidebar-header">
						<img src="/img/logo.png" class="img-responsive" alt="" />
					</div>
				</div>
			</div>

			<div class="container-fluid container-nav">
				<div class="navbar-right">
					<div class="userbox">
						<a th:href="@{/logout}"><span class="name">登出系统</span></a>
					</div>
				</div>
			</div>
		</div>

		<div class="container-fluid content">
			<div class="page-header">
				<div class="pull-left">
					<ol class="breadcrumb visible-sm visible-md visible-lg">
						<li>
							<a th:href="@{/goHome}"><i class="icon fa fa-home"></i>首页</a>
						</li>
						<li id="pageName">风险分析</li>
					</ol>
				</div>
			</div>

			<div class="row" th:fragment="content">
				<div class="sidebar">
					<div class="sidebar-collapse">
						<div class="sidebar-header">
							<div class="img-responsive"></div>
						</div>
						<div style="overflow-y: scroll;overflow-x:hidden;width: 270px;">
							<nav id="menu" class="nav-main" role="navigation">
								<ul class="nav nav-sidebar" th:if="${menuList?.size() != 0}">
									<li th:each="me,iterState:${menuList}">
										<a th:attr="href='/pro/pageLink/'+${projectId}+'/'+${groupArr}+'/'+${me.id}">
											<i class="fa fa-laptop" aria-hidden="true"></i>
											<span th:text="${me.name}">菜单项</span>
										</a>
									</li>
								</ul>
							</nav>
						</div>
					</div>
					<div class="sidebar-footer" style="display: none;"></div>
				</div>

				<div id="iframeDiv">
					<div id='iframe' frameborder="no" border="0" scrolling="yes" allowtransparency="yes">
						<div class="sidebar-minified">
							<div class="row">
								<div class="col-md-12">
									<form th:if="${resultMap.size() == 0}" th:action="@{/res/calRisk}" method="POST" enctype="multipart/form-data" 
										class="col-md-6 alert alert-danger" style="padding: 8px 0px;min-width:400px;">
										<label class="col-md-3 control-label label_left" for="file-input" style="margin-top:10px;min-width:158px;">不可接受风险划分：</label>
										<div class="col-md-7" style="margin-left:-30px">
											<input type="text" th:attr="value=${groupArr}" name="groupIds" style="display:none;"/>
											<input type="text" name="currMenuId" value="6" style="display:none;"/>
											<input type="text" th:attr="value=${projectId}" name="projectId" style="display:none;"/>
											<input type="text" class="form-control" name="acceptStandard" />
										</div>
										<button class="col-md-2 btn btn-primary button_right" id="select_file" style="padding:6px 6px;min-width:20px;">设置并计算</button>
									</form>
									
									
									<form th:if="${resultMap.size() != 0}" th:action="@{/res/exportWord}" method="POST" enctype="multipart/form-data" 
										class="col-md-12 alert alert-danger" style="padding: 8px 0px;">
										<input type="text" th:attr="value=${projectId}" name="projectId" style="display:none;"/>
										<input type="text" name="img1" style="display:none;"/>
										<input type="text" name="img2" style="display:none;"/>
										<button class="btn btn-success button_right" id="exptResult" style="margin:0px 10px;float:right;min-width:110px;">
											<i class="fa fa-upload red"></i>
										导出报告</button>
									</form>
								</div>
							
								<div class="col-sm-6" th:if="${resultMap.size() != 0}">
									<div class="panel panel-default bk-bg-white">
										<div class="panel-heading bk-bg-white">
											<h6><i class="fa fa-random red"></i><span class="break"></span>资产风险等级图示</h6>
										</div>
										<div class="panel-body">
											<div id="piechart1" style="height:300px"></div>
										</div>
									</div>
								</div>
								<div class="col-sm-6" th:if="${resultMap.size() != 0}">
									<div class="panel panel-default bk-bg-white">
										<div class="panel-heading bk-bg-white">
											<h6><i class="fa fa-random red"></i><span class="break"></span>资产风险接收类型图示</h6>
										</div>
										<div class="panel-body">
											<div id="piechart2" style="height:300px"></div>
										</div>
									</div>
								</div>

								<div th:if="${resultMap.size() != 0}" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<div th:each="table , tableState : ${resultMap}" class="panel panel-default bk-bg-white">
										<div class="panel-heading bk-bg-white">
											<h6>
												<i class="fa fa-table red" style="width:auto;"></i><span class="break"></span>
												<span th:text="'资产风险值表--'+${table?.key}">Default</span>
											</h6>
										</div>
										<div class="panel-body">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th>序号</th>
														<th>资产名称</th>
														<th>资产重要程度</th>
														<th>威胁</th>
														<th>威胁发生可能性</th>
														<th>威胁影响程度</th>
														<th>威胁风险系数</th>
														<!-- <th>资产风险值</th> -->
														<th>是否可接受风险</th>
														<th>风险等级</th>
													</tr>
												</thead>
												<tbody th:attr="id=${tableState.index}">
													
												</tbody>
											</table>
										</div>
									</div>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		
		<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

		<script type="text/javascript" src="/js/echarts.min.js"></script>

		<script src="/js/jquery.mmenu.min.js"></script>
		<script src="/js/core.min.js"></script>

		<script src="/js/table-editable.js"></script>
		<script src="/pagesJs/table.js"></script>
		<script src="/js/charts.js"></script>
		
		<script th:inline="javascript">
			var allData = [[${resultMap}]];
			var isAccept = {
				"name":"风险统计（按风险是否可接受分类）",
				"data":{
					"是":0,
					"否":0
				}
			};
			var riskLevel = {
				"name":"风险统计（按风险等级分类）",
				"data":{
					"极低风险":0,
					"低风险":0,
					"中风险":0,
					"高风险":0,
					"极高风险":0
				}
			};
			
			//表格
			tableData(allData);
			
			//图表
			var myChart1 = echarts.init(document.getElementById('piechart1'));
			var myChart2 = echarts.init(document.getElementById('piechart2'));
			
			var img1 = pieChart(myChart1, isAccept);
		    var img2 = pieChart(myChart2, riskLevel);
			$("input[name='img1']").val(img1);
			$("input[name='img2']").val(img2);
		</script>
		
	</body>
</html>